<template>
  <div>
    <el-card class="pane-card">
      <!--<div class="assignment-log">
        <h4>● 指派记录</h4>
        <el-card>
          <el-row>
            <el-col v-for="(item, index) in info['assign_log']" :key="index" :xs="12" :sm="8" :md="7" :lg="6" :xl="4">
              <h1>{{ item['assign_admin'] }}</h1>
              <span>{{ item.created_at }}</span>
            </el-col>
          </el-row>
        </el-card>
      </div>-->
      <div class="communicate-log">
        <h4>● 沟通记录</h4>
        <el-card v-if="!info['contact_log']||info['contact_log'].length===0">
          <div>空空如也~</div>
        </el-card>
        <div v-for="(item, index) in info['contact_log']" :key="index" class="timeline">
          <el-row class="content">
            <el-card>
              <div slot="header" class="header">
                <span>{{ item['admin_name'] }}</span>
                <div class="text-right" style="color: #b7b7b7;">{{ item['created_at'] }}</div>
              </div>
              <div class="body" v-html="item['contentlog']">{{ item['contentlog'] }}</div>
            </el-card>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      member_id: '',
      progressList: ['初步沟通', '需求分析', '展示引导', '方案报价', '协商议价', '成单签约', '丢单'],
      info: {
        star_class: 0,
        contact_time: '',
        next_contact_time: ''
      }
    }
  },
  created() {
    this.member_id = this.$route.query.id;
    this.getCustomerLog();
  },
  methods: {
    /**
     *  获取客户沟通信息
     *  接口:'customer/detail/{id}'
     */
    getCustomerLog() {
      const url = '/member/contactLog/' + this.member_id;
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.info = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';

  .pane-card {
    min-width: 1000px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .assignment-log {
    padding: 0 20px 20px 0;

    .el-card {
      .el-row {
        .el-col {
          text-align: center;

          h1 {
            font-size: 18px;
          }

          span {
            font-size: 14px;
            color: $textGray;
          }
        }
      }
    }
  }

  .communicate-log {
    padding-right: 20px;

    .next-time {
      margin-bottom: 15px;
      color: #1EC2A0;
    }

    .timeline {
      position: relative;

      .content {
        padding-bottom: 20px;

        .header {
          @include flex-row(center, space-between);
        }

        .body {
          line-height: 26px;
          color: $textGray;
        }
      }
    }
  }
</style>
